<template>
	<div class="addme-content">
		<div class="natTopVideo">
			<!-- <div class="video"> -->
			<div class="swiper-box" style="height: 500px">
				<swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
					<swiper-slide v-for="(item,index) in bannerList" :key="index" class="swiperBox">
						<div v-if="!item.autoplay" class="videoPlayBox" @click="playVideoBtn(index)">
							<img src="../common/image/videoDisplay.png" alt="">
						</div>
						<video ref="myVideo" :controls="true" :autoplay="false" :muted="item.autoplay" :src="item.playUrl" class="video-box"></video>
					</swiper-slide>
				</swiper>
				<swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
					<div class="swiper-button-prev swiper-button-white" slot="button-prev">
						<img src="../common/image/right@1x.png" alt="" style="width: 7px; height: 12px;  margin-top: 35%; margin-left: 45%;">
					</div>
					<swiper-slide class="itemNum" v-for="(item,index) in bannerList" :key="index">
						<div>
							<div class="num">{{item.num}}</div>
							<div class="text">{{item.text}}</div>
						</div>
					</swiper-slide>
					<div class="swiper-button-next swiper-button-white" slot="button-next">
						<img src="../common/image/left@1x.png" alt="" style="width: 7px; height: 12px; margin-top: 35%; margin-left: 45%;">
					</div>
				</swiper>
			</div>
		</div>
		<div class="active">
			<img class="active-image" src="@/common/image/jrwm_bt1@1x.png" alt="">
			<img src="@/common/image/jrwm_fh@1x.png" alt="" style="width: 100%;">
		</div>
		<div class="activeList" style="padding-bottom: 30px;">
			<div class="activeItem activeItem1">
				<div class="activeItem1Img">
					<div @click="dialogVisible=true" class="lijishenq">立即申请</div>
				</div>
			</div>
			<div class="activeItem activeItem2">
				<div class="activeItem2Img">
					<div @click="dialogVisible=true" class="lijishenq">立即申请</div>
				</div>
			</div>
			<div class="activeItem activeItem3">
				<div class="activeItem3Img">
					<div @click="dialogVisible=true" class="lijishenq">立即申请</div>
				</div>
			</div>
		</div>
		<div class="active"  style="background:#F8FBFF; padding-bottom: 120px;">
			<img class="active-image" style="margin-top:170px; margin-bottom: 100px;" src="@/common/image/jrwm_bt2@1x.png" alt="">
			<div>
				<el-carousel :interval="4000" :autoplay='false' type="card" width="368px" height="200px">
					<el-carousel-item v-for="(item,index) in bannerList" :key="index">
						<img :src="item.imgUrl" alt="">
					</el-carousel-item>
				</el-carousel>
			</div>
		</div>
		<div class="active">
			<img class="active-image" style="margin-top: 170px; margin-bottom: 0px;" src="@/common/image/jrwm_bt3@1x.png" alt="">
			<div class="activeList activeList2">
				<div class="activeItems">
					<img src="@/common/image/jrwm_bin@1x.png" alt="">
					<div>币安</div>
				</div>
				<div class="activeItems">
					<img src="@/common/image/jrwm_okex@1x.png" alt="">
					<div>OKEX</div>
				</div>
				<div class="activeItems">
					<img src="@/common/image/jrwm_huobi@1x.png" alt="">
					<div>火币</div>
				</div>
				<div class="activeItems">
					<img src="@/common/image/jrwm_jqqd@1x.png" alt="">
					<div>敬请期待</div>
				</div>
			</div>
		</div>
		<el-dialog title="请提交您的联系方式" style="border-radius: 10px;" :show-close="false" :visible.sync="dialogVisible" width="30%" top="30vh">
			<span slot="title" class="dialog-footer">
				<img @click="dialogVisible=false" src="@/common/image/tc_sc@1x.png" alt="">
				<span>请提交您的联系方式</span>
			</span>
			<div class="inputBox">
				<input @input="inputChange" v-model.number="phone" placeholder="请输入您的手机号"></input>
			</div>
			<div class="input-bottomtext">提交后我们工作人员会尽快联系您的，请耐心等待～</div>
			<div :style="btnFlag?'background:#1F2E75;':''" class="dialog-footer-center" @click="submit()">
				提交
			</div>
		</el-dialog>
		<div class="submitModel">
			<el-dialog width="254px" height="254px" top="30vh" :show-close="false" :visible.sync="dialogVisible2">
				<div style="text-align: center;padding-bottom: 20px;">
					<img src="@/common/image/tc_tscg@1x.png" alt="">
					<div style="color: #333333; font-size: 20px;">提交成功</div>
				</div>
			</el-dialog>
		</div>
		<footerPage />
	</div>
</template>

<script>
	import {
		swiper,
		swiperSlide
	} from 'vue-awesome-swiper'
	import footerPage from '../components/footer'
	export default {
		components: {
			footerPage,
			swiper,
			swiperSlide
		},
		data() {
			let self = this;
			return {
				dialogVisible2: false,
				btnFlag: false,
				phone: "",
				dialogVisible: false,
				NumIndex: 0,
				swiperIndex: 0,
				itemNumList: [{
						num: "no1",
						text: "怎么怎么玩法"
					},
					{
						num: "no2",
						text: "怎么怎么玩法"
					},
					{
						num: "no3",
						text: "怎么怎么玩法"
					},
					{
						num: "no4",
						text: "怎么怎么玩法"
					},
					{
						num: "no5",
						text: "怎么怎么玩法"
					},
					{
						num: "no6",
						text: "怎么怎么玩法"
					},
				],
				bannerList: [{
						autoplay: false,
						playUrl: 'http://copula.top/b62e4f319e794af79336c4b9f9e8fe16/0a650d0678374a078ac3ae1755558ee1-31bb2ad90dbff0abdf62e4b390f33491-fd.mp4',
						imgUrl: require("../common/image/jrwm_yhfk1@1x.png"),
						num: "NO.1",
						text: "平台玩法视频"
					},
					{
						autoplay: false,
						playUrl: 'http://copula.top/b62e4f319e794af79336c4b9f9e8fe16/0a650d0678374a078ac3ae1755558ee1-31bb2ad90dbff0abdf62e4b390f33491-fd.mp4',
						imgUrl: require("../common/image/jrwm_yhfk2@1x.png"),
						num: "NO.2",
						text: "创建战队视频"
					},
					{
						autoplay: false,
						playUrl: 'http://copula.top/b62e4f319e794af79336c4b9f9e8fe16/0a650d0678374a078ac3ae1755558ee1-31bb2ad90dbff0abdf62e4b390f33491-fd.mp4',
						imgUrl: require("../common/image/jrwm_yhfk3@1x.png"),
						num: "NO.3",
						text: "实盘入驻视频"
					}
				],
				swiperOptionTop: {
					loop: true,
					loopedSlides: 5, // looped slides should be the same
					spaceBetween: 10,
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev'
					}
				},
				swiperOptionThumbs: {
					loop: true,
					loopedSlides: 5, // looped slides should be the same
					spaceBetween: 10,
					leftedSlides: true,
					slidesPerView: 'auto',
					touchRatio: 0.2,
					slideToClickedSlide: true,
					on: {
						slideChangeTransitionEnd: function() {
							var i = this.activeIndex
							self.bannerList.forEach(item => {
								item.autoplay = false
							})
							self.$refs.myVideo.forEach(item => {
								item.pause()
							})
						},
					},
				},
				swiperIndex: 0,
				imageList: [
					"../common/image/jrwm_yhfk1@1x.png",
					"../common/image/jrwm_yhfk2@1x.png",
					"../common/image/jrwm_yhfk3@1x.png",
					"../common/image/jrwm_yhfk4@1x.png",
					"../common/image/jrwm_yhfk5@1x.png",
					"../common/image/jrwm_yhfk6@1x.png"
				]
			}
		},
		watch: {
			bannerList(value) {
				console.log(value)
			}
		},
		methods: {
			zantingVideo() {
				console.log(123)
			},
			playVideoBtn(i) {
				this.bannerList[i].autoplay = true
				this.$refs.myVideo[i].play()
				this.$forceUpdate()
			},
			inputChange(e) {
				var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (myreg.test(e.target.value)) {
					this.btnFlag = true
				} else {
					this.btnFlag = false
				}
			},
			submit() {
				if (!this.btnFlag) {
					this.$message.warning('请先输入或输入正确的手机号')
					return
				}
				this.dialogVisible2 = true
				this.btnFlag = false
				this.dialogVisible = false
				setTimeout(() => {
					this.dialogVisible2 = false
				}, 1000)
			},
		},
		watch: {

		},
		mounted() {
			this.$nextTick(() => {
				const swiperTop = this.$refs.swiperTop.swiper
				const swiperThumbs = this.$refs.swiperThumbs.swiper
				swiperTop.controller.control = swiperThumbs
				swiperThumbs.controller.control = swiperTop
				console.log(swiperThumbs)
			})
		}
	}
</script>

<style lang="less" scoped>
	.submitModel{
		.el-dialog{
			width: 254px !important;
			height: 196px !important;
			padding: 0 !important;
			padding-top: 16px !important;
		}
	}
	
	.natTopVideo{
		margin-top: -650px;
		height: 640px !important;
	}
	.swiper-button-prev {
		background-image:none!important;
		position: relative;
		margin-top: 30px;
		margin-left: 30px;
		margin-left: 2.5%;
		background: #1f2e75 !important;
		z-index: 999;
		position: absolute;
		display: flex;
		left: -3%;
		top: -30px;
		width:100px !important; 
		height: 100% !important;
		z-index: 999 !important;
		.img{
			position: absolute;
			left: 45% !important;
			top: 45% !important;
			width: 9px;
			height: 16px;
			// margin-top: 100px;
		}
	}
	// .swiper-button-white{
	// 	background: red !important;
	// 	z-index: 999 !important;
	// }
	.swiper-button-next {
		background-image:none!important;
		margin-top: 30px;
		margin-left: 30px;
		margin-left: 2.5%;
		z-index: 999;
		position: absolute;
		display: flex;
		right: 0px;
		top: -30px;
		width:100px !important; 
		height: 100% !important;
		z-index: 999 !important;
		background: #1f2e75 !important;
		.img{
			// margin-top: 100px;
		}
	}

	.swiper-container {
		display: flex;
		align-items: center;
	}

	.swiper-box {
		border-radius: 10px !important;
		margin-top: 90px;
	}
	.swiperBox {
		position: relative;
		border-radius: 10px !important;
	}

	.video-box {
		border-radius: 10px !important;
	}

	.swiper-wrapper {
		border-radius: 10px !important;
	}

	.swiper-container:first-child {
		border-radius: 10px 10px 0px 0px !important;
	}

	.gallery-thumbs {
		position: relative;
		border-radius: 0px 0px 10px 10px !important;
	}

	.videoPlayBox {
		position: absolute;
		width: 80px;
		height: 80px;
		left: 46.6%;
		top: 37%;
		z-index: 999;

		>img {
			cursor: pointer !important;
			width: 100%;
			height: 100%;
		}
	}

	.video-box {
		width: 100% !important;
		height: 100% !important;
	}

	.el-carousel__arrow {}

	.el-carousel__arrow--left {
		display: inline-block !important;
		background-color: #1F2E75;
		font-size: 30px;
		font-weight: 600;
	}

	.el-carousel__arrow--left:hover {
		display: inline-block !important;
		background-color: #1F2E75;
		font-size: 30px;
		font-weight: 600;
	}

	.el-carousel__arrow--right {
		display: inline-block !important;
		background-color: #1F2E75;
		font-size: 30px;
		font-weight: 600;
	}

	.el-carousel__arrow--right:hover {
		display: inline-block !important;
		background-color: #1F2E75;
		font-size: 30px;
		font-weight: 600;
	}

	.lijishenq {
		width: 192px;
		margin-top: 90% !important;
		display: inline-block;
		padding: 0vh 1vw;
		height: 56px;
		border-radius: 10px;
		background-color: #1F2E75;
		line-height: 56px;
		text-align: center;
		font-size: 22px;
		color: #FFFFFF;
		cursor: pointer;
	}

	.activeItem>div {
		background-size: cover;
		background-position: center;
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: center;
	}

	.activeItem1Img {
		background: url(../common/image/jrwm_ggs@1x.png) no-repeat;
	}

	.activeItem2Img {
		background: url(../common/image/jrwm_jys@1x.png) no-repeat;
	}

	.activeItem3Img {
		background: url(../common/image/jrwm_jyy@1x.png) no-repeat;
	}


	.input-bottomtext {
		margin: 2vh 0vw;
		color: #999999;
		font-size: 12px;
	}

	.itemNum {
		display: flex;
		align-content: center;
		flex-wrap: wrap;
		padding: 1vh 1vw;
		>div {
			width: 100%;
		}
		color: #ffffff;
		.num {
			font-size:12px;
		}
		.text {
			font-size:18px;
		}
	}
	.swiper-container {
		background-color: #000;
	}
	.swiper-slide {
		background-size: cover;
		background-position: center;
		&.slide-1 {
			background-image: url('../common/image/jrwm_yhfk1@1x.png');
		}
		&.slide-2 {
			background-image: url('../common/image/jrwm_yhfk2@1x.png');
		}
		&.slide-3 {
			background-image: url('../common/image/jrwm_yhfk3@1x.png');
		}
		&.slide-4 {
			background-image: url('../common/image/jrwm_yhfk4@1x.png');
		}
		&.slide-5 {
			background-image: url('../common/image/jrwm_yhfk5@1x.png');
		}
	}
	.gallery-top {
		height: 80% !important;
		width: 100%;
	}
	.gallery-thumbs {
		height: 86px !important;
		box-sizing: border-box;
		padding: 0px 86px;
	}
	.gallery-thumbs .swiper-slide {
		width: 33.33%;
		height: 100%;
		opacity: 0.4;
		cursor: pointer;
	}
	.gallery-thumbs .swiper-slide-active {
		background: #465ABD;
		background: linear-gradient(to bottom, #465ABD, #1F2E75);
		opacity: 1;
	}
	.swiper-wrapper {
		width: 100% !important;
	}
	.gallery-thumbs {
		background-color: #1F2E75;
	}
	.swiperImage {
		// width: 100%;
		// height: 100%;
	}
	.el-carousel__item .el-carousel__item--card {
		width: 200px;
	}
	.el-carousel__item--card {
		background: none !important;
	}
	.activeList2 {
		padding: 30px 0px !important;
		background: url(../common/image/lastBgImg.png) no-repeat;
		background-size: cover;
		height: 567px;
		background-position-y: 0px;
		div {
			font-size: 30px;
			font-weight: 600;
		}
	}
	.addme-content {
		width: 100%;
		.el-carousel__item h3 {
			color: #475669;
			font-size: 14px;
			opacity: 0.75;
			line-height: 200px;
			margin: 0;
		}
		.activeList {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.activeItem {
				flex: 1;
				height: 468px;
				padding: 2vh 2vw;
				text-align: center;
			}
		}
		>div {
			width: 100%;
			padding: 0px 18.75%;
		}
		.active {
			text-align: center;
			.active-image {
				width: 268px;
				height: 90px;
				margin: 50px 0px;
			}
		}
		.natTopVideo {
			height: 640px !important;
			// background: url(../common/image/jrwm_banner@1x.png) no-repeat;
		}
	}
	.el-carousel__indicators--outside {
		display: none;
	}
	.el-carousel__item {
		width: 368px !important;
		margin: 0 10% !important;
		>img {
			width: 100%;
			height: 100%;
			border-radius: ;
		}
	}
	.el-carousel__container{
		height: 282px !important;
	}
	.el-carousel__container .el-carousel__item--card {
		// width: 33.33%;
	}
	.swiper-button-white{
	}
	
	
	.el-dialog__body{
		padding-top: 0 !important;
	}
	.el-dialog{
		border-radius: 10px;
		padding: 32px 35px !important;
		width: 644px !important;
		height: 390px !important;
	}
	.el-dialog__header{
		position: relative;
		img{
			position: absolute;
			top: -20%;
			right: 0%;
			width: 28px;
			height: 28px;
			cursor:pointer;
		}
	}
	.el-dialog__body{
		border-radius: 0px 0px 80px 80px !important;
	}
	.dialog-footer-center {
		width: 100%;
		margin-top:46px !important; 
		height: 64px;
		line-height: 64px;
		text-align: center;
		background: #CECECE;
		cursor: pointer;
		font-size: 24px;
		color: #FFFFFF;
		margin-top: 38px;
	}
	.dialog-footer{
		font-size: 24px;
		color: #333333;
		font-weight: 600;
	}
	.inputBox{
		width: 100% !important;
		height:64px;
		background: #FAFAFA;
		margin-top: 28px;
		margin-bottom: 14px;
		input{
			background: #FAFAFA;
			width: 100% !important;
			height: 64px;
			border: none !important;
			padding: 9px;
			outline:none;
		}
	}
</style>
